<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="referrer" content="no-referrer" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,
            maximum-scale=1,
            minimum-scale=1, user-scalable=no"
    />
    <link rel="stylesheet" href="./assest/style/reset.css" />
    <link rel="stylesheet" href="./assest/style/font/iconfont.css" />
    <link rel="stylesheet" href="./assest/style/common.css" />
    <link rel="stylesheet" href="./assest/style/house-detail.css" />
    <style>
      .acitve {
        background-color: #ff8200;
        color: #fff;
      }
    </style>
    <title>房子详情</title>
  </head>

  <body> 
    <div id="detail" class="house-detail rel"></div>

    <script src="./js/axios.js"></script>
    <script src="./js/jQuery.js"></script>

    <script>
      // 全局对象, 用来保存房子详情
      var detaiObj = {};
      var Detail = {
        bindEvents() {
          $("#detail").on("click", "#heart", function () {
            Detail.shoucang();
          });
        },

        // 获取详情
        getHouseDetail() {
          //  location.href是js自带的,返回的是网页的地址
          var webUrl = location.href;
          // 获取=号的下标,indexOf用来获取下标
          var index = webUrl.indexOf("=");
          var id = webUrl.slice(index + 1);
          // 根据id来获取详情
          var url = "http://localhost:3000/house/" + id;
          axios.get(url).then(function (res) {
            // console.log(res.data);
            // 将数据存入全局对象, 给其它函数使用
            detaiObj = res.data;
            Detail.render(res.data);
          });
        },

        shoucang() {
          $(".heart").toggleClass("on");
          // 发请求检查是否已收藏, 若已收藏则删除, 没有收藏就添加收藏
          var houseId = detaiObj.id;
          var userId = localStorage.userId;
          var url = `http://localhost:3000/love?houseId=${houseId}&userId=${userId}`;
          axios.get(url).then(function (res) {
            // 长度大于0说明已经被收藏, 要删除数据
            if (res.data.length > 0) {
              var id = res.data[0].id;
              var url = "http://localhost:3000/love/" + id;
              axios.delete(url).then(function () {
                console.log("删除成功");
              });
            } else {
              // 添加
              // 构造数据
              var data = {
                // "id": 32419,  改成房子id, 不改会冲突, 因为添加收藏时,会自动生成一个id
                houseId: detaiObj.id,
                // 每一条数据都需要知道是哪个用户的, 所以需要一个用户id, 就是userId
                userId: localStorage.userId,
                collectNum: detaiObj.collectNum,
                imageUrl: detaiObj.imageUrl,
                showMinPrice: detaiObj.showMinPrice,
                name: detaiObj.name,
                description: detaiObj.description,
                city: detaiObj.city,
                area: detaiObj.area,
                address: detaiObj.address,
                street: detaiObj.street,
              };
              // 收藏接口地址
              var url = "http://localhost:3000/love";
              // 添加一条收藏数据
              axios.post(url, data).then(function (res) {
                // todo
              });
            }
          });
        },

        render(obj) {
          var htmlStr = `   
                <p id="heart" class="heart abs">
                    <span id="icon" class="iconfont f26 icon-heart"> </span>
                </p>
                <img class="w100pc" alt=""
                    src="./assest/img/${obj.imageUrl}">
                <div class="h70 bg-fff pl-15 pr-15 flex fdc jc-c">
                    <p class="f18 bold">${obj.name}</p>
                    <p class="mt-10 flex jc-sb f888">
                        <span>7室1厅7卫·120㎡·11床·15人</span>
                        <span>房屋编号：RH-88870280</span>
                    </p>
                </div>
                <div class="h70 bg-fff mt-5 pl-15 pr-15 flex fdc jc-c">
                    <p class="f16 bold location">地理位置</p>
                    <p class="mt-10 f888">较场尾·海角9号沙滩度假别墅</p>
                </div>
                <div
                    class="bg-fff mt-5 pl-15 pr-15 box pb-30">
                    <div class="tabs flex jc-sa aic">
                        <span class="f16 fcc h100pc active">房源详情</span>
                        <span class="f16 fcc h100pc">周边美食娱乐</span>
                        <span class="f16 fcc h100pc">小区环境</span>
                    </div>
                    <p class="mt-20 f14 lh15 f888">
                        <span class="bold">特色: </span>
                        <span>浪漫美景+免费WIFI、电视、齐全设备=完美假期。</span>
                    </p>
                    <div class="mt-20 f14 lh15 f888">
                        <p>1、房型：3层480平米，6房3厅8卫，可住20人；</p>
                        <p> 2、床型：5张1.8米大床、3张1.5米双人床、7张1.2米榻榻米、2张1米单人床； </p>
                    </div>
                    <p class="fcc mt-20">
                        <span class="button base">查看全部</span>
                    </p>
                </div>
                <a class="price fcc f18 bold fff" href="/order/book/88870280">查看价格•预定</a>
            `;
          $("#detail").html(htmlStr);
        },
      };
      Detail.getHouseDetail();
      Detail.bindEvents();
    </script>
  </body>
</html>
